<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 9种 至少掌握5种 最少3种 -->
    <script>
      /*   var arr = [1,1,5,5,'true','true',true,true,{},{},0,0,null,null,undefined,undefined,NaN,NaN];
        // 第一种数组去重
        // set 容器 存放不能重复的value
        let set_arr = new Set(arr);
        console.log(set_arr);
        // set容器 不是数组   要求数组去重完后仍然得是数组
        // 将set_arr变为数组
        let arrNew = Array.from(set_arr);
        console.log(arrNew); */

        // 第二种 map 存放不能重复的key 
        /* var arr = [1,1,5,5,'true','true',true,true,{},{},0,0,null,null,undefined,undefined,NaN,NaN]
        let map1 = new Map([['name','tom'],['age',10]]);
        console.log(map1); */
        // map.set('sex','nan');
        // map.set('sex','nv');
        // console.log(map.has('sex1'));//当map上有该属性返回true 没有该属性变为false
        // console.log(map);
        // 现在为了完成数组去重，我们将数组中的每一项放到map key值上，属性值就设计为布尔值（true false）
        // 当判断map容器中有对应的属性名 true 就不让它放到新数组中
        // 新数组中存放不重复的数组元素
       /*  let map = new Map();//{'key'=>'value',....}
        // map  key不能重复  

        let arr_new = [];
        // 新数组  存放不重复的arr中的值
        for(let i = 0;i<arr.length;i++){
            if(map.has(arr[i])){// key :1
                map.set(arr[i],true)//{'1'=>false}  {'1'=>true,'5'=>true}
            }else{
                map.set(arr[i],false);//{'1'=>false}  {'1'=>true,'5'=>false,"true"=>false}
                arr_new.push(arr[i]);//arr_new:[1,5,'true']
            }
        }
        console.log(arr_new); */


        // 第三种 去重
        /* var arr = [1,1,5,5,'true','true',true,true,{},{},0,0,null,null,undefined,undefined,NaN,NaN]; */
      /*   for(var i=0;i<arr.length;i++){
            for(var j = i+1;j<arr.length;j++){
                if(arr[i] === arr[j]){
                    arr.splice(j,1);
                }
            }
        }
        console.log(arr); */
        // 第四种 indexOf  作用查看我们数组中有没有该元素 如果有返回下标，没有返回-1  如果数组中存在这一项indexOf返回的值是大于0 true
    /*     var  arr_new = [];
        arr.forEach(el=>{
            if(arr_new.indexOf(el)<0){
                // 先去判断arr_new中有没有该项，若是有不加入，没有才加入
                arr_new.push(el);
            }
        })
        console.log(arr_new); */


        // 第五种
        /* var arr = [1,1,5,5,'true','true',true,true,{},{},0,0,null,null,undefined,undefined,NaN,NaN]; */
        // includes的作用  查看数组中是否包含某个元素如果包含返回true 不包含返回false
        /* var arr_test = [1,1,2];
        console.log(arr_test.includes(3));   */
        //去查看arr中的每一项，并把它们放进arr_new,arr_new有没有该项，如果有重复 不往里放，没有放进入   
        /* var arr_new = [];//[1，5]
        arr.forEach(el=>{
            if(!arr_new.includes(el)){
                // push作用：往数组中添加元素，尾部添加
                arr_new.push(el);
            }
        })
        console.log(arr_new); */


        // 第六种
       /*  var arr = [1,1,5,5,'true','true',true,true,{},{},0,0,null,null,undefined,undefined,NaN,NaN]; */
        // 过滤器 filter
        // var arr_test = [1,5,3,8];
        // let arr_test1 = arr_test.filter((item,index,arr)=>{
        //     console.log(item,index,arr);
        //     return item >4
        // })

        // 当filter回调函数中的返回值为true 对应的item 会自动放到arr_test1中
        // console.log(arr_test1);//[5,8]

/* 
        let arr_new = arr.filter((item,index,arr)=>{
            // 当return的值为true，就会把当前的item 放到新数组中
            // indexOf数组中对应元素的下标   
            // 1   下标0  0
            // 1    下标0 1
            return arr.indexOf(item) == index
        })
        console.log(arr_new); */

        // 第七种
        /* var arr = [1,1,5,5,'true','true',true,true,{},{},0,0,null,null,undefined,undefined,NaN,NaN,{name:'tom'}];
        let obj = {};
        let arr_new = arr.filter((item,index,ar)=>{
            // 重复的值过滤了
            // hasOwnProperty有没有该属性名，如果有true 没有返回false
            // 对象的属性名 string1
            return obj.hasOwnProperty(typeof item + item) ?false :(obj[typeof item +item]=true);

            // typeof 1  + 1    number +1 number1
            // 对象的属性名
            
            // {
            //     number1：true
            //     // number1:true
            //     // number5:true
            //     ...
            //     object[object Object]:true
            // }
            
           
        })
        console.log(arr_new); */

        // 第八种
        /* var arr = [1,1,5,5,'true','true',true,true,{},{},0,0,null,null,undefined,undefined,NaN,NaN,{name:'tom'}];
        var arr_new = [];
        // sort
        arr = arr.sort();
        console.log(arr);
        for(var i=1;i<arr.length;i++){
            if(arr[i]!== arr[i-1]){
                arr_new.push(arr[i]);
            }
        }
        console.log(arr_new); */

        // 第九种
        // 递归 就是自己调用自己，并有结束条件，否则就是死循环
        // 内存溢出 内存泄露
        // 
     /*    var arr = [1,1,5,5,'true','true',true,true,{},{},0,0,null,null,undefined,undefined,NaN,NaN,{name:'tom'}];
        function loop(index){
            if(index>1){
                if(arr[index] == arr[index-1]){
                    // splice
                    arr.splice(index,1);
                }
                loop(index-1);
            }
        }
        loop(arr.length-1);//数组下标的最大值
        console.log(arr);
 */

     /*    var arr = [1,2,5,8,9];
        // splice(下标，删除的个数,替换元素)
        arr.splice(0,1,'yao');
        console.log(arr); */

        // 第十种
        var arr = [1,1,5,5,'true','true',true,true,{},{},0,0,null,null,undefined,undefined,NaN,NaN,{name:'tom'}];

        let arr_new = arr.reduce((pre,cur,index,arr)=>{
            return pre.includes(cur) ? pre :pre.concat(cur);
        },[])
        console.log(arr_new);







        // reduce 累加器
        /* let arr_test = [1,5,8,9];
        let num = arr_test.reduce((pre,cur,index,arr)=>{
            console.log(pre,cur,index,arr);
            return pre + cur;
        },0)
        console.log(num); */
    </script>
</body>
</html>